<template>
  <su-popup :show="show" type="bottom" :isMaskClick="false">
    <scroll-view scroll-y="true" style="height: 75vh">
      <view class="details w-100 bg-white ss-r-20 position-relative">
        <view class="close ss-flex justify-center align-center" @click="close">
          <uni-icons type="closeempty" size="20" color="white"></uni-icons>
        </view>
        <view class="chart" v-if="houseData.images">
          <swiper class="detail-chart" :current="index" :duration="1000" @change="change">
            <swiper-item v-for="(row, index) in houseData.images" :key="index">
              <image class="w-100" :src="row" mode=""></image>
            </swiper-item>
          </swiper>
        </view>
        <view class="indexes" v-if="houseData.images"
          >{{ index + 1 }}/{{ houseData.images.length }}</view
        >
        <view class="title w-100 ss-line-1 ss-font-32 bg-white ss-p-x-40 ss-p-y-26">
          {{ houseData.roomName }}
        </view>

        <view class="welfare ss-m-t-20 ss-flex justify-start ss-flex-wrap ss-p-l-40">
          <view
            class="welfare-item ss-m-b-20 ss-flex justify-start"
            v-if="houseData.beds.length >= 1"
          >
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/13mansion/13mansion/bed.png"
            ></image>
            <view>
              {{ houseData.beds[0]?.bedNum }}张{{ houseData.beds[0]?.bedType
              }}{{ houseData.beds[0]?.bedSize / 100 }}米
            </view>
          </view>
          <view class="welfare-item ss-m-b-20 ss-flex justify-start">
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/13mansion/13mansion/house.png"
            >
            </image>
            <view v-if="houseData.area_valueType === 1">
              {{ houseData.area_valueList[0] / 100 }}㎡
            </view>
            <view v-if="houseData.area_valueType === 2">
              {{ houseData.area_valueList[0] / 100 }}-{{
                houseData.area_valueList[1] / 100
              }}㎡
            </view>
          </view>
          <view
            class="welfare-item ss-m-b-20 ss-flex justify-start"
            v-if="houseData.floors"
          >
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/13mansion/13mansion/floor.png"
            >
            </image>
            <view v-if="houseData.floors[0].valueType === 1">
              {{ houseData.floors[0].valueList[0] }}层
            </view>
            <view v-if="houseData.floors[0].valueType === 2">
              {{ houseData.floors[0].valueList[0] }}-{{
                houseData.floors[0].valueList[1]
              }}层
            </view>
          </view>
          <view class="welfare-item ss-m-b-20 ss-flex justify-start">
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/13mansion/13mansion/window.png"
            >
            </image>
            <view>{{ houseData.window }}</view>
          </view>
          <view class="welfare-item ss-m-b-20 ss-flex justify-start">
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/13mansion/13mansion/smoke.png"
            >
            </image>
            <view>{{ houseData.smoking }}</view>
          </view>
          <view class="welfare-item ss-m-b-20 ss-flex justify-start">
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/13mansion/13mansion/number.png"
            >
            </image>
            <view>{{ houseData.maxOccupancy }}人</view>
          </view>
        </view>
        <view class="welfare ss-flex justify-start ss-flex-wrap ss-p-l-40">
          <view class="welfare-item ss-flex justify-start" style="width: 100%">
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/13mansion/13mansion/wifi.png"
            ></image>
            <view>
              {{ houseData.internets[0] }}
            </view>
          </view>
        </view>
        <view class="welfare ss-flex ss-m-t-20 justify-start ss-flex-wrap ss-p-l-40">
          <view class="welfare-item ss-flex justify-start" style="width: 100%">
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/13mansion/13mansion/meal.png"
            ></image>
            <view>
              {{ houseData.ratePlanName }}
            </view>
          </view>
        </view>
        <view class="tips ss-m-t-20 ss-p-x-40" v-if="houseData.facilities">
          <view
            class="tips-item ss-flex justify-start align-start ss-m-b-30"
            v-for="(item, index) in houseData.facilities"
            :key="index"
          >
            <view class="tips-title ss-font-28 ss-m-r-60">{{ index }}</view>
            <view class="tips-content flex-sub ss-font-28">
              <text v-for="(value, page) in item" :key="page"
                >{{ value }}
                <text v-if="page < item.length - 1">、 </text>
              </text>
            </view>
          </view>
        </view>
        <view class="policy ss-p-x-30 ss-m-t-15">
          <view class="ss-p-b-20">
            <view class="policy-title ss-p-b-12">预定政策</view>
            <view
              class="policy-content"
              v-if="houseData.bookRule.applicablePeople.length >= 1"
            >
              适用人群：
              <text
                v-for="(item, index) in houseData.bookRule.applicablePeople"
                :key="index"
                >{{ item === "内宾" ? "中国大陆居民" : item }}
              </text>
            </view>
            <view class="policy-content">
              最早入住时间：{{ sheep.$helper.timeFormat(begin_date, "yyyy-mm-dd") }}
              {{ houseData.bookRule.checkInFrom }}
            </view>
            <view class="policy-content" v-if="houseData.bookRule.checkInTo">
              最晚入住时间：{{ sheep.$helper.timeFormat(begin_date, "yyyy-mm-dd") }}
              {{ houseData.bookRule.checkInTo }}
            </view>
            <view class="policy-content"
              >最晚离店时间：{{ sheep.$helper.timeFormat(end_date, "yyyy-mm-dd") }}
              {{ houseData.bookRule.checkOutTo }}
            </view>
            <view class="policy-content" v-if="houseData.bookRule.maxQuantityLimit">
              每单限购数：{{ houseData.bookRule.maxQuantityLimit }}
            </view>
          </view>
          <view class="ss-p-b-20">
            <view class="policy-title ss-p-b-12">取消政策</view>
            <view class="policy-content" v-if="houseData.cancelRule.cancelType === 1">
              不可取消/变更，如未入住，酒店将扣除全额房费
            </view>
            <view
              class="policy-content"
              v-if="
                houseData.cancelRule.cancelType === 2 ||
                houseData.cancelRule.cancelType === 3
              "
            >
              【{{
                sheep.$helper.timeFormat(end_date, "yyyy-mm-dd hh:MM")
              }}】前可取消，逾期不可取消/变更，如未入住，酒店将扣除全额房费
            </view>
          </view>
          <view class="ss-p-b-20" v-if="houseData.descriptions.length > 1">
            <view class="policy-title ss-p-b-12">房型政策</view>
            <view
              class="policy-content"
              v-for="(item, index) in houseData.descriptions"
              :key="index"
            >
              {{ index + 1 }}、{{ item }}
            </view>
          </view>
        </view>
        <view style="height: 200rpx" class="ss-safe-bottom" v-if="btnShow"></view>
        <view
          class="w-100 ss-safe-bottom btn-box ss-flex justify-between align-center ss-p-x-30 bg-white"
          v-if="btnShow"
        >
          <view class="price">
            <text>￥{{ houseData.sellPrice }}</text>
            <!-- <text class="ss-m-l-12">￥{{ houseData.originPrice }}</text> -->
          </view>
          <view
            class="btn ss-r-8 ss-font-36 text-center ss-m-y-30"
            :style="{ backgroundColor: houseData.inventory <= 0 ? '#D8D8D8' : '#7881D9' }"
            @click="Reserve(houseData)"
            >{{ houseData.inventory <= 0 ? "满房" : "预定" }}</view
          >
          
        </view>
      </view>
    </scroll-view>
  </su-popup>
</template>

<script setup>
import { ref, computed } from "vue";
import sheep from "@/sheep";

const emit = defineEmits(["close"]);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  houseData: {
    type: Object,
    default: () => ({}),
  },
  begin_date: {
    type: String,
    default: "",
  },
  end_date: {
    type: String,
    default: "",
  },
  btnShow: {
    type: Boolean,
    default: true,
  },
});

let index = ref(0);

const images = computed(() => props.houseData?.images || []);

const close = () => {
  emit("close", false);
  index.value = 0;
};

const Reserve = (item) => {
  if (item.inventory > 0) {
    let params = {
      id: item.id,
      begin_date: props.begin_date,
      end_date: props.end_date,
    };
    sheep.$router.go("/pagesChlid/confirm_order", {
      ...params,
    });
  }
};

const change = (e) => {
  index.value = e.detail.current;
};
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.details {
  .close {
    position: fixed;
    right: 4rpx;
    top: 4rpx;
    height: 48rpx;
    width: 48rpx;
    border-radius: 50%;
    background-color: rgba(61, 61, 61, 0.5);
    z-index: 99;
  }

  .chart {
    width: 100%;
    height: 488rpx;
    position: relative;

    .detail-chart {
      width: 100%;
      height: 488rpx;

      image {
        width: 100%;
        height: 488rpx;
      }
    }
  }

  .title {
    font-family: Source Han Sans;
    font-weight: 500;
    color: #3d3d3d;
    border-bottom: 1rpx solid #eee;
  }

  .welfare {
    .welfare-item {
      width: 33%;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 12rpx;
      }

      view {
        flex: 1;
        font-family: Source Han Serif CN;
        font-size: 24rpx;
        color: #3d3d3d;
      }
    }
  }

  .tips-item {
    font-family: Source Han Serif CN;

    .tips-title {
      color: #818181;
    }

    .tips-content {
      color: #3d3d3d;
    }
  }
}

.indexes {
  width: 68rpx;
  height: 40rpx;
  border-radius: 20rpx;
  background: rgba(0, 0, 0, 0.5);
  font-family: 思源黑体;
  font-size: 24rpx;
  line-height: 40rpx;
  text-align: center;
  color: #ffffff;
  position: absolute;
  top: 420rpx;
  right: 20rpx;
}

.policy-title {
  font-family: 思源黑体;
  font-size: 28rpx;
  color: #0f8b90;
}

.policy-content {
  font-family: 思源黑体;
  font-size: 28rpx;
  color: #666666;
}

.btn-box {
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1rpx solid #eee;
}

.btn {
  width: 248rpx;
  height: 74rpx;
  font-family: Source Han Sans;
  line-height: 74rpx;
  color: #fff;
}

.price {
  font-family: Source Han Sans;

  text:nth-child(1) {
    font-size: 36rpx;
    color: #f83d3d;
  }

  text:nth-child(2) {
    font-size: 28rpx;
    text-decoration: line-through;
    color: #505050;
  }
}
</style>
